<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>词汇测试--个人信息登记</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style type="text/css">

        body{
            position: relative;
			height: 600px;
			background-image: url(../static/images/page1.1.jpg);
			background-repeat: no-repeat;
			background-color: #008081;
        }
        .data{
                /* background-color: rgb(0, 0, 0); */
				width: 303px;
				height: 40px;
				margin: 8px auto;
				border: solid 5px;
				border-radius: 5px;
				border-color: rgb(0,0,0);
				/* color: white; */
				font-size: 20px;
        } 
        #cet4,#cet6{
            width: 303px;
        }
				#submit {
			width: 160px;
			height: 80px;
			position: relative;
			top: 391px;
			left: 1231px;
		}
        .box{
            position: relative;
			left: 836px;
			top: 355px;
			width: 460px;
			height: 165px;
			/* background-color: white;
        }
        
       

    </style>

</head>

<body>
    <form id="form">
        <div class="box">
            <!-- autocomplete="off" 关闭自动填充 -->
            <input type="text" name="sid" id="sid"  class="data" required autocomplete="off"><br>

            <input type="text" name="username" id="username"   class="data" required autocomplete="off"><br>

            <input type="number" name="cet4" id="cet4"   class="data" required autocomplete="off" min="0" max="750"><br>

            <input type="number" name="cet6" id="cet6"  class="data" required autocomplete="off" min="0" max="750"><br>
        </div>
        <input type="image" value="提交" id="submit" src="../static/images/page1.2.png" onclick="getInformation()">
    </form>
    <script>
        function getInformation(){
            let json = {"code":200,"msg":"get test"};
        //获取所有的表单选项
        let arr1 = document.getElementById("sid");
        let arr2 = document.getElementById("username");
        let arr3 = document.getElementById("cet4");
        let arr4 = document.getElementById("cet6");

        json.data={"sid": arr1.value,"username":arr2.value,"cet4":arr3.value,"cet6":arr4.value};
        let a = JSON.stringify(json);
       // alert(a);  //弹窗显示
        $("form").submit(function(e) {
            //传递到后台
            $.ajax({
                type: 'POST',
                data: a,  //json
                contentType: 'application/json',
                dataType: 'json',
                url: 'http://43.138.184.214:8000/login',
                success: function (data) {
                    // alert("发送成功");
                    // alert(arr2.value);
                    sessionStorage.setItem("username", arr2.value);
                    addCookie("id",data['data']['id'],0);
                    window.location.href="http://43.138.184.214:9000/first";
                },
                error: function (e) {
                    alert("发送失败");
                    window.location.href="http://43.138.184.214:9000/login2";
                }
            });
            return false;//阻止表单提交
    })
        }
        function addCookie(objName, objValue, objHours) {
            var str = objName + "=" + escape(objValue); //编码
            if (objHours > 0) {//为0时不设定过期时间，浏览器关闭时cookie自动消失
                var date = new Date();
                var ms = objHours * 3600 * 1000;
                date.setTime(date.getTime() + ms);
                str += "; expires=" + date.toGMTString();
            }
            document.cookie = str;
        }
        
    </script>

</body>
</html>
